<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一次使用 Juicer</title>
   <!-- 引入 juicer.js -->
   <script src="juicer.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <!-- 1、定义渲染节点 开始 -->
    <ol id="drawing-node"></ol>
    <!-- 定义渲染节点 结束 -->
    <button id="load_more">加载更多...</button>
    <!-- 2、定义模板 开始 -->
    <script id="t:data-list" type="text/template">
        <!-- Juicer 语法学习-if-each 语句 -->
        {@if data_list.length}
            <!-- each 循环数据 -->
            {@each data_list as value,index}
                <li style="${index|add_color,value,index};">$${value.title}</li>
            {@/each}
        {@else}
            <p>数据为空</p>
        {@/if}
    </script>
    <!-- 定义模板 结束 -->
    <script>
        $(function(){
            console.log('jQuery 测试.');
            // 配置 Juicer
            juicer.set('tag::commentOpen','#{');
            // 注册函数
            juicer.register('add_color',function(value,parent,index){
                value=parseInt(value)%2;
                var colors=['red','green'];
                var color="color:"+colors[value];
                return color;
            });
            // 3-1、定义模板数据
            var data={
                data_list:[
                    {title:'Zig'},
                    {title:"&lt;a href='https://www.yahoo.com/' target='_blank'&gt;Yahoo&lt;/a&gt;"},
                    {title:'C++'},
                ],
            }
            // 3-2、调用 juicer 函数、生成 模板 函数
            var juicer_tpl=juicer("#t:data-list");
            // data 动态变化时、再次传入 juicer_tpl.render 中
            var html=juicer_tpl.render(data);
            // 3-3、在模板渲染节点 渲染 DOM
            $("#drawing-node").html(html);
            // 加载更多 开始
            $("#load_more").click(function(){
                console.log('加载更多...');
                $.ajax({
                    url:'../data_list.php',
                    type:'get',
                    success:function(back){
                        var result=back.data;
                        var info=back.info;
                        data.data_list=result;
                        // 生成 HTML
                        var html=juicer_tpl.render(data);
                        // 渲染 HTML
                        $("#drawing-node").append(html);
                        console.log(info);
                    },
                    error:function(){
                        console.log('网络不稳定，加载失败...');
                    },
                });
            });
            // 加载更多 结束
        });
    </script>
</body>
</html>